<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>聊天室</title>
		<link rel="stylesheet" href="mui/css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="mui/css/app.css"/>
		<script src="static/header.js" charset="utf-8"></script>
		<script src="static/index.js" charset="utf-8"></script>
		<script src="mui/js/mui.min.js"></script>
		<style>
			body{
				background-color: #fff;
				margin: 0;
				padding: 0;
			}
			#title{
				position: fixed;
				top: 0;
				width: 100%;
				height: 20px;
				padding: 10px 0px 8px 20px;
				border: 1px solid dimgray;
				background-color: yellowgreen;
			}
			.layui-tab-card{
				width:100%;
				bottom:0;
				margin-top: 40px;
			}

			.left_div{
				float: left;
			}
			.right_div{
				overflow: hidden;
				position: absolute;
				/*background: yellowgreen;*/
				width: calc(100% - 200px);
			}
			.right_div div{
				background-color: #fff;
			}
			.layui-tab-title .layui-this:after {
				border-style: none;
			}
			/*右侧聊天框*/
			#msg_ul{
				width: 100%;
				height: 100%;
				background-color: inherit;
				padding-bottom: 110px; /*让底部按钮不会遮住上面内容*/
			}
			.mui-table-view:after{
				background-color:transparent;
			}
			/**消息**/
			.mui-media-body{
				width: 60%;
			}
			img{
				border-radius: 3px;
			}
			/**左边好友消息*/
			.username{
				color: #AAAAAA;
				margin-left: 10px;
				font-size: 12px;
			}
			/**右边消息*/
			/*消息内容 p标签 */
			.f_msg_div{
				width: 60%;
				margin-top: 0%;
			}
			.my_msg_div{
				overflow: visible;
				float: right;
				width: 60%;
			}
			.msg1,
			.msg2 {
				/*border: 1px solid #ddd;*/
				background-color: #fff;
				font-size: 16px;
				/*font-family: STXingkai, "Microsoft YaHei", "微软雅黑","黑体","_sans",Arial;;*/
				font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
				line-height: 18px;
				padding: 12px;
				box-sizing: border-box;
				border-radius: 6px;
				position: relative;
				word-break: break-all;
				white-space: normal;
			}
			.msg1{
				margin-left: 10px;
				width:auto;
				display:inline-block !important;
				display:inline;
				background-color: #9eea6a;
			}
			.msg2{
				margin-right: 3px;
				background-color: #9eea6a;
			}
			.msg1 span {
				display: block;
				width: 0;
				height: 0;
				border-width: 3px 14px 8px 0px;
				border-style: solid;
				border-color: transparent #9eea6a transparent transparent;/*#eee*/
				position: absolute;
				top: 20%;
				left: -10px;
			}
			.msg2 span {
				display: block;
				width: 0;
				height: 0;
				border-width: 3px 0 8px 22px;
				border-style: solid;
				border-color: transparent transparent transparent #9eea6a;
				position: absolute;
				top: 20%;
				left: 98%;
			}
			.mui-table-view:before{
				/*消息ul的顶部边框线*/
				background-color: #fff;
			}
			/**输入消息模块*/
			.msg-text{
				position: fixed;
				bottom: 0;
				margin-bottom: -12px;
				width: 100%;
			}
			#submit{
				float: right;
				width: 100px;
				height: 30px;
				margin-right: 240px;
				margin-top: -50px;
				background-color: #E9E9E9;
				color: #00FF00;
			}
			#content{
				width: 88%;
				height: 80px;
			}
		</style>
	</head>
	<body>
		<div class="layui-tab-card site-demo-button" style="position: relative;">
			<div class="left_div" style="width: 200px">
			<ul class="layui-nav layui-nav-tree layui-nav-side" style="">
				<li class="layui-nav-item layui-nav-itemed">
					<dl class="layui-nav-child">
						<dd class="layui-this">
							<a href="#" data-id="a1" data-title="选项a" class="site-demo-active" data-type="tabAdd">选项a</a>
						</dd>
						<dd>
							<a href="#" data-id="a2" data-title="选项b" class="site-demo-active" data-type="tabAdd">选项b</a>
						</dd>
						<dd>
							<a href="#" data-id="a3" data-title="选项c"  class="site-demo-active" data-type="tabAdd">选项c</a>
						</dd>
					</dl>
				</li>
			</ul>
			</div>

			<div class="right_div" style="margin-left: 200px;">
				<!--<button id="reLogin" >重新登录</button>-->
				<ul class="layui-tab-title">
					<li id="friendId" style="display: none"></li>
					<li class="layui-this" id="chatTab"></li>
				</ul>
				<div class="layui-tab-content">
					<!--<div class="layui-tab-item layui-show" id="a1">默认宽度是相对于父元素100%适应的，你也可以固定宽度。</div>-->
					<div class="mui-content">
						<div class="home_div">
							<li class="mui-table-view-cell mui-media">
								<p class="f-20 text-success">欢迎使用H-ui.admin <span class="f-14">v3.1</span>后台模版！</p>
								<p>登录次数：18 </p>
								<p>上次登录IP：222.35.131.79.1  上次登录时间：2014-6-14 11:19:55</p>
							</li>
							<li class="mui-table-view-cell mui-media">
								<p class="f-20 text-success">欢迎使用H-ui.admin <span class="f-14">v3.1</span>后台模版！</p>
								<p>登录次数：18 </p>
								<p>上次登录IP：222.35.131.79.1  上次登录时间：2014-6-14 11:19:55</p>
							</li>
						</div>

						<ul class="mui-table-view" id="msg_ul">
							<!--<li class="mui-table-view-cell mui-media">
								<a href="javascript:;">
									<img class="mui-media-object mui-pull-left" src="mui/images/shuijiao.jpg" style="margin-right:0px">
									<div class="mui-media-body">
										&lt;!&ndash; <span class="username">幸福</span> &ndash;&gt;
										<p class='msg1'>
											静静的看这个世界，最后终于疯了。
											<span></span>
										</p>
									</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media">
								<a href="javascript:;">
									<img class="mui-media-object mui-pull-right" src="mui/images/yuantiao.jpg">
									<div class="mui-media-body mymsg" style="overflow: visible;">
										<p class='msg2'>
											静静的看这个世界，最后终于疯了，静静的看这个世界，最后终于疯了。
											<span></span>
										</p>
									</div>
								</a>
							</li>-->
							<!--<span id="msg1"></span><br />
                            <span id="msg2"></span>;<span id="msg5"></span>
                            <br><span id="msg3"></span>;;<span id="msg4"></span>-->
						</ul>
						<div class="msg-text">
							<input id='content' type="text" class="mui-input-clear mui-input" autofocus autocomplete="off"/>
							<button id="submit" type="button">发送</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script>
		$(function(){
		    $(".msg-text").hide();
		    $("#msg_ul").hide();
			layui.use('element', function() {

			});
		})
	</script>
</html>
